<template>
    <div class="comment-root">
        <div class="score">
            <div class="fuhe">
                <p class="num">10<span class="sufix">.0</span></p>
                <p class="wenzi">符合描述度</p>
            </div>
            <div class="huodong">
                <p class="num">10<span class="sufix">.0</span></p>
                <p class="wenzi">活动满意度</p>
            </div>
            <div class="lieren">
                <p class="num">10<span class="sufix">.0</span></p>
                <p class="wenzi">猎人综合评分</p>
            </div>
        </div>
        <div class="comment-box">
            <div class="comment-item" v-for="c in proComt">
                <div class="text-avatar">
                    <span style="font-size:0.9rem;color:#5c5c5c;">{{c.text}}</span>
                    <img :src="c.user.avatar_s">
                </div>
                <div class="rating-date">
                    <div class="rating">
                        <img src="static/img/star.png" v-for="n in c.star">
                    </div>
                    <span style="font-size:0.8rem;color:#ccc;">{{c.date_added}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState([
            "proComt"
        ])
    },
    mounted:function(){
        var params = {
            start:0,
            count:20,
            public:1
        }
        
        this.$store.dispatch("requestProComt",params)
        .then(res=>{
            this.$store.commit("setProComt",res.data.items);
        });
    }
}
</script>

<style scoped>
.comment-root{
    width: 100vw;
    background-color: #fff;
    padding: 2vw;
}
.score{
    margin-top: 5vw;
    display: flex;
    justify-content:space-around;
}
.score>div{
    border-right: 1px solid #eee;
    text-align: center;
    padding-right: 2vw;
    color: #5c5c5c;
}
.score>div:nth-of-type(3){
    border: none;
}
.wenzi{
    margin: 0;
    font-size: 0.7rem;
}
.num{
    color: #4abdcc;
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
}
.sufix{
    font-size: 1.4rem;
}
.comment-box{
    margin: 5vw 1vw 2vw;
}
.comment-item{
    margin-top:15vw; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.text-avatar{
    display: flex;
    justify-content: space-between;
}
.text-avatar img{
    width: 9vw;
    height: 9vw;
    border-radius: 50%;
    margin-left: 8vw;
}
.rating-date{
    display: flex;
    justify-content: space-between;
    margin-top: 3vw;
}
.rating img {
    width: 10px;
    height: 10px;
    margin: 0 1px;
}
</style>